Adaptive layouts allow a Flutter application to change its structure and interaction patterns according to the space available to the application. Instead of designing only for one fixed screen size, an adaptive Flutter application can provide suitable layouts for phones, tablets, desktops, web browsers, foldables, split-screen windows, and other form factors.
In Flutter, responsive design generally focuses on fitting UI elements into available space, while adaptive design focuses on selecting a layout or interaction pattern that remains usable in that available space. In practice, Flutter applications commonly use both approaches together.
An adaptive layout is a UI layout that changes its structure according to the available space or environment.
For example, a shopping application could use:
The goal is not simply to make everything smaller or larger. The goal is to select a layout that makes effective use of the available space.
| Responsive Design | Adaptive Design |
|---|---|
| Adjusts UI elements to fit available space. | Chooses an appropriate UI structure for the available space. |
| May change sizes, spacing and positioning. | May change navigation, information architecture or layout. |
| Example: cards resize. | Example: bottom navigation changes to NavigationRail. |
| Focuses on fitting the UI. | Focuses on making the UI usable. |
Flutter recommends considering both responsive and adaptive behavior when building applications for different screen sizes and platforms.
Flutter applications can run on many platforms and window sizes. A fixed mobile layout may not provide a good experience when displayed on a tablet, desktop monitor, or resized browser window.
Adaptive layouts help you:
A good adaptive application should generally make layout decisions based on available space rather than simply checking whether the device is a phone or tablet.
For example, avoid thinking:
if (deviceIsTablet) {
// Tablet UI
}Instead, think about the actual width available to the application:
if (availableWidth >= 600) {
// Large-screen layout
} else {
// Small-screen layout
}This approach also works when an application is running in a resizable desktop window or in split-screen mode.
A useful way to organize adaptive applications is:
Identify information that is shared between different layouts.
For example, navigation destinations can be represented by shared data even if the UI uses NavigationBar on small screens and NavigationRail on larger screens.
Use MediaQuery.sizeOf when the overall application window size matters, or LayoutBuilder when the local space available to a widget matters.
Choose a different layout when the available space crosses a meaningful breakpoint.
LayoutBuilder provides the constraints supplied by its parent. Its builder receives a BoxConstraints object containing minimum and maximum width and height.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileLayout();
}
return const LargeLayout();
},
)This allows the widget to choose a layout based on the actual space available to it.
A breakpoint is a width or height threshold at which the UI changes its structure.
Example:
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileLayout();
} else if (constraints.maxWidth < 1000) {
return const TabletLayout();
} else {
return const DesktopLayout();
}
},
)The values above are examples. A breakpoint should be selected according to the needs of your UI rather than treating a particular number as a universal device classification.
Small screens usually have limited horizontal space, so vertically arranged content is often useful.
class MobileLayout extends StatelessWidget {
const MobileLayout({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
children: const [
Text(
'Mobile Layout',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
Card(
child: Padding(
padding: EdgeInsets.all(20),
child: Text('Content'),
),
),
],
);
}
}When more horizontal space is available, content can be arranged in multiple columns.
class TabletLayout extends StatelessWidget {
const TabletLayout({super.key});
@override
Widget build(BuildContext context) {
return GridView.count(
padding: const EdgeInsets.all(20),
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
children: const [
Card(child: Center(child: Text('Card 1'))),
Card(child: Center(child: Text('Card 2'))),
Card(child: Center(child: Text('Card 3'))),
Card(child: Center(child: Text('Card 4'))),
],
);
}
}Large screens can support navigation and content simultaneously.
class DesktopLayout extends StatelessWidget {
const DesktopLayout({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
SizedBox(
width: 250,
child: Container(
color: Colors.black12,
child: const Center(
child: Text('Sidebar'),
),
),
),
const Expanded(
child: Center(
child: Text('Main Content'),
),
),
],
);
}
}import 'package:flutter/material.dart';
class AdaptiveHomePage extends StatelessWidget {
const AdaptiveHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Adaptive Flutter App'),
),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileLayout();
}
if (constraints.maxWidth < 1000) {
return const TabletLayout();
}
return const DesktopLayout();
},
),
);
}
}The same application can therefore select different UI structures based on available width.
When the overall application window size matters, MediaQuery.sizeOf(context) can be used.
final size = MediaQuery.sizeOf(context);
final width = size.width;
final height = size.height;Example:
Widget build(BuildContext context) {
final width = MediaQuery.sizeOf(context).width;
if (width < 600) {
return const MobileLayout();
}
return const LargeLayout();
}MediaQuery.sizeOf describes the size of the application's current window/view, while LayoutBuilder provides the constraints available at a particular location in the widget tree.
| Feature | LayoutBuilder | MediaQuery |
|---|---|---|
| Information | Parent layout constraints | Application window/view information |
| Main object | BoxConstraints | Size and MediaQuery properties |
| Scope | Local widget area | Application window |
| Useful for | Reusable responsive components | Window-wide adaptive decisions |
| Example | Card changes from Row to Column | Navigation changes according to app window width |
Choose the API according to what you are measuring.
Navigation is one of the most important areas where adaptive design becomes useful.
A small screen might use a NavigationBar, while a larger screen can use a NavigationRail.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return Scaffold(
body: const Center(
child: Text('Mobile Content'),
),
bottomNavigationBar: NavigationBar(
destinations: const [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
return Scaffold(
body: Row(
children: [
NavigationRail(
selectedIndex: 0,
onDestinationSelected: (index) {},
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.person),
label: Text('Profile'),
),
],
),
const Expanded(
child: Center(
child: Text('Large Screen Content'),
),
),
],
),
);
},
)A sidebar is often useful when enough horizontal space is available.
LayoutBuilder(
builder: (context, constraints) {
final isLargeScreen = constraints.maxWidth >= 800;
if (isLargeScreen) {
return Row(
children: [
const SizedBox(
width: 280,
child: Sidebar(),
),
const VerticalDivider(width: 1),
const Expanded(
child: MainContent(),
),
],
);
}
return const MainContent();
},
)List-detail layouts are common in email, contacts, messaging and productivity applications.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 700) {
return Row(
children: [
SizedBox(
width: 300,
child: ContactList(),
),
const VerticalDivider(width: 1),
const Expanded(
child: ContactDetails(),
),
],
);
}
return const ContactList();
},
)On a small screen, the list can navigate to the details page. On a large screen, both can appear together.
Grid layouts should make effective use of available width.
LayoutBuilder(
builder: (context, constraints) {
int columns;
if (constraints.maxWidth < 600) {
columns = 2;
} else if (constraints.maxWidth < 1000) {
columns = 3;
} else {
columns = 4;
}
return GridView.builder(
padding: const EdgeInsets.all(16),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
),
itemCount: 20,
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text('Item ${index + 1}'),
),
);
},
);
},
)Instead of always deciding the exact number of columns, you can allow Flutter to determine how many items fit based on a maximum cross-axis extent.
GridView.builder(
padding: const EdgeInsets.all(16),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 250,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
),
itemCount: 30,
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text('Product ${index + 1}'),
),
);
},
)This approach can work well for product catalogs, dashboards and image galleries because the grid responds to available width without requiring a device-specific column count.
A form should generally avoid becoming excessively wide on desktop screens.
LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth > 500
? 450.0
: constraints.maxWidth * 0.9;
return Center(
child: SizedBox(
width: width,
child: Column(
children: [
const TextField(
decoration: InputDecoration(
labelText: 'Name',
),
),
const SizedBox(height: 16),
const TextField(
decoration: InputDecoration(
labelText: 'Email',
),
),
const SizedBox(height: 16),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Submit'),
),
),
],
),
),
);
},
)A dashboard can change from a vertical list to a multi-column layout depending on available space.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return ListView(
padding: const EdgeInsets.all(16),
children: const [
DashboardCard(title: 'Users'),
DashboardCard(title: 'Orders'),
DashboardCard(title: 'Revenue'),
DashboardCard(title: 'Pending'),
],
);
}
return GridView.count(
padding: const EdgeInsets.all(20),
crossAxisCount: constraints.maxWidth < 1000 ? 2 : 4,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
children: const [
DashboardCard(title: 'Users'),
DashboardCard(title: 'Orders'),
DashboardCard(title: 'Revenue'),
DashboardCard(title: 'Pending'),
],
);
},
)Individual components can also adapt themselves.
class AdaptiveProductCard extends StatelessWidget {
const AdaptiveProductCard({super.key});
@override
Widget build(BuildContext context) {
return Card(
child: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 280) {
return const Column(
children: [
Icon(Icons.shopping_bag, size: 50),
Text('Product Name'),
Text('₹999'),
],
);
}
return const Row(
children: [
Icon(Icons.shopping_bag, size: 50),
SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Product Name'),
Text('₹999'),
],
),
],
);
},
),
);
}
}Adaptive layouts should avoid unnecessary fixed widths. Expanded and Flexible allow widgets to use available space.
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 150,
child: const Center(
child: Text('Sidebar'),
),
),
),
Expanded(
flex: 3,
child: Container(
height: 150,
child: const Center(
child: Text('Content'),
),
),
),
],
)Here, the available width is distributed according to the flex values.
Large screens provide a lot of horizontal space, but using all of it can make text and forms unnecessarily wide.
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 900,
),
child: const Padding(
padding: EdgeInsets.all(24),
child: Text(
'Large-screen content with a readable maximum width.',
),
),
),
)This technique is particularly useful for articles, forms, settings pages and text-heavy interfaces.
SafeArea helps protect application content from system UI such as status bars, notches, camera cutouts and rounded display corners.
Scaffold(
body: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
return Center(
child: Text(
'Available Width: ${constraints.maxWidth}',
),
);
},
),
),
)SafeArea is useful when designing interfaces that need to work across devices with different physical display features.
Orientation can sometimes be relevant, but it should not be the only factor used to decide an application's layout.
For example, instead of assuming that landscape always means tablet:
if (orientation == Orientation.landscape) {
// Large UI
}it is generally better to consider the actual available width:
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 700) {
return const WideLayout();
}
return const CompactLayout();
},
)This works better for split-screen and resizable windows because the available space can change independently of physical orientation.
Flutter Web applications commonly run inside resizable browser windows. Therefore, an adaptive layout should respond when the browser window changes size.
LayoutBuilder(
builder: (context, constraints) {
return Text(
'Browser Width: ${constraints.maxWidth.toStringAsFixed(0)}',
);
},
)When running the application in a browser, resize the browser window to test how the layout responds.
Desktop applications can provide additional navigation and content simultaneously.
class DesktopHome extends StatelessWidget {
const DesktopHome({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
const SizedBox(
width: 260,
child: Sidebar(),
),
const VerticalDivider(width: 1),
Expanded(
child: Column(
children: [
const Header(),
Expanded(
child: MainContent(),
),
],
),
),
],
);
}
}Modern applications may run in environments where the available application window does not correspond directly to the physical screen size.
Examples include:
For this reason, adaptive Flutter layouts should generally respond to the available application space rather than hard-coding a specific hardware type.
Different layouts should usually use the same underlying application data.
For example:
class Product {
final String name;
final double price;
const Product({
required this.name,
required this.price,
});
}
const products = [
Product(name: 'Laptop', price: 55000),
Product(name: 'Phone', price: 25000),
Product(name: 'Tablet', price: 30000),
];The same products list can be displayed as a ListView on mobile and as a grid on larger screens.
class AdaptiveLayout extends StatelessWidget {
final Widget mobile;
final Widget tablet;
final Widget desktop;
const AdaptiveLayout({
super.key,
required this.mobile,
required this.tablet,
required this.desktop,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return mobile;
}
if (constraints.maxWidth < 1000) {
return tablet;
}
return desktop;
},
);
}
}Usage:
AdaptiveLayout(
mobile: const MobileHome(),
tablet: const TabletHome(),
desktop: const DesktopHome(),
)This approach keeps the breakpoint logic in one reusable location.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Adaptive App'),
),
body: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth;
if (width < 600) {
return const MobileHome();
}
if (width < 1000) {
return const TabletHome();
}
return const DesktopHome();
},
),
);
}
}
class MobileHome extends StatelessWidget {
const MobileHome({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
children: const [
Card(
child: ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.person),
title: Text('Profile'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
),
],
);
}
}
class TabletHome extends StatelessWidget {
const TabletHome({super.key});
@override
Widget build(BuildContext context) {
return GridView.count(
padding: const EdgeInsets.all(20),
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
children: const [
Card(child: Center(child: Text('Home'))),
Card(child: Center(child: Text('Profile'))),
Card(child: Center(child: Text('Settings'))),
Card(child: Center(child: Text('Reports'))),
],
);
}
}
class DesktopHome extends StatelessWidget {
const DesktopHome({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
const SizedBox(
width: 260,
child: ColoredBox(
color: Colors.black12,
child: Center(
child: Text('Sidebar'),
),
),
),
const VerticalDivider(width: 1),
const Expanded(
child: Center(
child: Text('Desktop Content'),
),
),
],
);
}
}if (isTablet) {
return TabletUI();
}Prefer checking available space instead of relying on hardware categories.
Too many breakpoints can make the code difficult to maintain. Use a breakpoint when the UI genuinely needs to change.
Container(
width: 700,
)A fixed width can cause overflow when the available space is smaller.
Use maximum widths for forms and text-heavy content.
Available width is often more useful than simply checking portrait or landscape orientation.
Adaptive layouts should remain usable with larger text, accessibility settings and different input methods.
LayoutBuilder for local constraints.MediaQuery.sizeOf when the application window size matters.Expanded and Flexible for flexible layouts.Do not test an adaptive application only on one phone.
Test at different widths such as:
Also test:
Build an adaptive admin dashboard with the following behavior:
| Screen Space | Suggested UI |
|---|---|
| Small | Bottom navigation + single-column cards. |
| Medium | Navigation rail + two-column dashboard. |
| Large | Sidebar + four-column dashboard. |
| Extra Large | Sidebar + constrained main content + larger data views. |
This project can demonstrate LayoutBuilder, MediaQuery, NavigationBar, NavigationRail, Row, Column, GridView, Expanded and ConstrainedBox.
Answer: An adaptive layout changes its UI structure or interaction pattern according to the available space or environment.
Answer: Responsive design focuses on fitting UI elements into available space, while adaptive design focuses on selecting a suitable and usable layout for that space.
Answer: LayoutBuilder is commonly used because it provides the constraints available from its parent.
Answer: It provides a BoxConstraints object containing minimum and maximum width and height constraints.
Answer: It provides the current size of the application's window/view in logical pixels and is useful when the overall window size matters.
Answer: The same physical device can run an application in different window sizes, such as split-screen or a resized desktop/web window. Available space is therefore a more reliable basis for layout decisions.
Answer: A breakpoint is a threshold at which an application changes its layout structure or behavior.
Answer: For example, an application can use NavigationBar in a compact layout and NavigationRail in a wider layout.
Answer: It can prevent content such as forms and text from becoming excessively wide.
Answer: No. Available width and height generally provide more useful information because window size can vary independently of physical orientation.
LayoutBuilder.AdaptiveLayout widget.| Concept | Key Point |
|---|---|
| Adaptive Layout | Changes UI structure according to available space or environment. |
| Responsive Design | Fits UI elements into available space. |
| LayoutBuilder | Provides local parent constraints. |
| BoxConstraints | Contains minimum and maximum width and height. |
| MediaQuery.sizeOf | Provides the current application window/view size. |
| Breakpoint | Threshold used to change layout behavior. |
| Expanded | Uses available flex space. |
| Flexible | Allows flexible sizing in Flex layouts. |
| ConstrainedBox | Applies additional size constraints. |
| SafeArea | Protects content from system UI and display cutouts. |
| NavigationBar | Useful for compact navigation layouts. |
| NavigationRail | Useful for wider layouts. |
| GridView | Useful for adaptive multi-column content. |
For structured Flutter training and practical learning resources, visit:
JustAcademy Flutter Training Course
To register for a Flutter course demo:
Register for Flutter Course Demo
Creating adaptive layouts is an essential Flutter skill for developing applications that work effectively across mobile, tablet, desktop and web environments. The key is to design around the space actually available to the application rather than relying on assumptions about the physical device.
LayoutBuilder is especially useful for local responsive components, while MediaQuery.sizeOf is useful when the overall application window size matters. By combining these tools with meaningful breakpoints, flexible widgets, adaptive navigation, responsive grids, maximum content widths and SafeArea, developers can create Flutter interfaces that remain usable across many screen sizes and form factors.
